<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, no-store" />
<title>NET355 留言板</title>
<jsp:include page="/resource/pages/key.html"></jsp:include>
<link href="/resource/css/common.css" rel="stylesheet" type="text/css" />
<link href="/resource/css/index.css" rel="stylesheet" type="text/css" />
<link href="/resource/css/toolkit.css" rel="stylesheet" type="text/css" />
<link href="/resource/js/matchpicker/matchpicker.css" rel="stylesheet" type="text/css" />
<link href="/resource/js/datepicker/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resource/js/jquery.js"></script>
<script type="text/javascript" src="/resource/js/common.js"></script>
<script type="text/javascript" src="/resource/js/toolkit.js"></script>
<script type="text/javascript" src="/resource/js/matchpicker/matchpicker.js"></script>
<script type="text/javascript" src="/resource/js/datepicker/datepicker.js"></script>
<script type="text/javascript">
	var MenuIndex = 5;
	var PageIndex = ${pageIndex};
	var ChatSize = ${chatSize};
	var ReplyGuid = "";
	var ChatMap = {};
	$(document).ready(function(){
		getPage(PageIndex);
		$("#ipt_cmt_name").click(function(){
			if($(this).val().trim()=="匿名") {
				$(this).val("").addClass("on");
			} 
		}).blur(function(){
			if($(this).val().trim()=="匿名" || $(this).val().trim()=="") {
				$(this).val("匿名").removeClass("on");
			} 
		});
		$("#ta_cmt_msg").click(function(){
			if($(this).val().trim()=="内容...") {
				$(this).val("").addClass("on");
			} 
		}).blur(function(){
			if($(this).val().trim()=="内容..." || $(this).val().trim()=="") {
				$(this).val("内容...").removeClass("on");
			} 
		});
	});
	
	formatObj = function(obj) {
		var html = "";
		html+='<div id="'+obj.guid+'" class="item">';
		html+='<div><span>'+obj.createTime.date()+'</span><h4>'+obj.name+' ['+obj.ip+']<a onclick="reply(\''+obj.guid+'\')">[回复]</a></h4></div>';
		if(obj.fatherChat!=null) {
			var father = obj.fatherChat;
			html+='<div class="quote">';
			html+='<div><span>'+father.createTime.date()+'</span><h4>'+father.name+' ['+father.ip+']</h4></div>';
			html+='<p><a onclick="showFatherChat(\''+obj.guid+'\', \''+father.guid+'\');">'+father.content+'</a></p>';
			html+='</div>';
		}
		html+='<p>'+obj.content+'</p>';
		html+='</div>';
		return html;
	}
	
	getPage = function(page){
		$.ajax({
			type : "get",
			url : "/blog/ajax/syschat"
				+"?ts="+new Date().getTime(),
			dataType : "json",
			data: {pageIndex: page}
		}).done(function(result){
			if(result.isTrue) {
				var html = "";
				for (var i = 0; i < result.tag.length; i++) {
					var obj = result.tag[i];
					ChatMap[obj.guid] = obj;
					html += formatObj(obj);
				}
				$("#div_chats").html(html);
				$(".pagination").initPagination("getPage", page, result.tag.length);
			} else {
				$.showAlert(result.message, "确定");
			}
		}).fail(function(){
			$.showAlert("网络繁忙，请稍后再试！", "确定");
		});
	};
	
	reply = function(guid){
		ReplyGuid = guid;
		$("#lb_reply_name").html("回复["+ChatMap[guid].name+"]");
		$("#ipt_cmt_name").focus();
	};
	
	clearCmt = function(){
		ReplyGuid = "";
		$("#lb_reply_name").html("");
		$("#ipt_cmt_name").val("匿名").removeClass("on");
		$("#ta_cmt_msg").val("内容...").removeClass("on");
	};
	
	sendCmt = function(){
		var name = $("#ipt_cmt_name").val().trim();
		var content = $("#ta_cmt_msg").val().trim();
		if(content=="") {
			$.showAlert("请输入内容！", "确定");
			return;
		} 
		if(name=="") {
			name = "匿名";
		}
		$.ajax({
			type : "post",
			url : "/blog/ajax/chat"
				+"?ts="+new Date().getTime(),
			dataType : "json",
			data: {name: name, content: content, reply: ReplyGuid}
		}).done(function(result){
			if(result.isTrue) {
				var obj = result.tag;
				ChatMap[obj.guid] = obj;
				var html = formatObj(obj);
				$("#div_chats").append(html);
				clearCmt();
			} else {
				$.showAlert(result.message, "确定");
			}
		}).fail(function(){
			$.showAlert("网络繁忙，请稍后再试！", "确定");
		});
	};
	
	showFatherChat = function(guid, father) {
		if($("#"+father).length>0) {
			var dom = $("#"+father);
//			dom.removeClass("item").addClass("quote");
			dom.addClass("father");
			$("#"+guid).before(dom);
		} else {
			$.ajax({
				type : "get",
				url : "/blog/ajax/syschat"
					+"?ts="+new Date().getTime(),
				dataType : "json",
				data: {pageIndex: page}
			}).done(function(result){
				if(result.isTrue) {
					format(result.tag);
					var html = "";
					for (var i = 0; i < result.tag.length; i++) {
						var obj = result.tag[i];
						ChatMap[obj.guid] = obj;
						html += formatObj(obj);
					}
					$("#div_chats").html(html);
					$(".pagination").initPagination("getPage", page, result.tag.length);
				} else {
					$.showAlert(result.message, "确定");
				}
			}).fail(function(){
				$.showAlert("网络繁忙，请稍后再试！", "确定");
			});
		}
	}
	
</script>
</head>
<body class="bg">
	<div id="section_left" class="leftBlock">
		<jsp:include page="/resource/pages/left.html"></jsp:include>
	</div>
	
	<div id="section_right" class="rightBlock">
		<jsp:include page="/resource/pages/menu.html"></jsp:include>
		<div id="section_content" class="contentBlock">
			<h2 class="normal">Welcome to chatZone</h2>
			<h3 class="normal"></h3>
			<div id="div_chats">
				<!-- <div class="item">
					<div>
						<span>2013-12-20 20:34</span>
						<h4>张三 [192.168.12.153]<a>[回复]</a></h4>
					</div>
					<div class="quote">
						<div>
							<span>2013-12-20 20:34</span>
							<h4>张三 [192.168.12.153]</h4>
						</div>
						<p><a>
							若引用的标准文件标有日期,则在此日期以后对此引用标准文件的增补和修订均不适用于本标准。若引用的文件不标日期,则本标准应采用该引用标准文件的最新版本。 
							</a>
						</p>
					</div>
					<p>
						若引用的标准文件标有日期,则在此日期以后对此引用标准文件的增补和修订均不适用于本标准。若引用的文件不标日期,则本标准应采用该引用标准文件的最新版本。 
					</p>
				</div>
				<div class="item">
					<div>
						<span>2013-12-20 20:34</span>
						<h4>张三 [192.168.12.153]<a>[回复]</a></h4>
					</div>
					<p>
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
					</p>
				</div> -->
			</div>
			<div class="pagination">
				<!-- <a>1</a>
				<a class="on">2</a>
				<a>3</a>
				<a>4</a>
				<a>5</a>
				<a>...</a>
				<a>12</a>
				<a>13</a>
				<span>
					<a>GO</a>
					<input  />
				</span> -->
			</div>
			<div style="clear: both; height: 20px;"></div>
			<div id="div_comment" class="noteComment">
				<input id="ipt_cmt_name" type="text" value="匿名" /><label id="lb_reply_name"></label>
				<textarea id="ta_cmt_msg">内容...</textarea>
				<span><a class="clear" onclick="clearCmt();">清空</a><a class="send" onclick="sendCmt();">发送</a></span>
			</div>
			<div style="clear: both; height: 30px;"></div>
		</div>
	</div>
	
	<jsp:include page="/resource/pages/foot.html"></jsp:include>
	
	

</body>
</html>



